<template>
  <div class="detail-image">
    <div class="detail-des">
      <div class="start clearfix"></div>
      <div>{{detailimages.desc}}</div>
      <div class="end clearfix"></div>
    </div>
    <div v-for="item in detailimages.detailImage" :key="item.index">
      <div>
        <div class="img-title">{{item.key}}</div>
        <div v-for="img in item.list" :key="img.index" class="img-img">
          <img :src="img" @load="imgLoad" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detailimages: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    imgLoad() {
      this.$bus.$emit("detailImgLoad");
    }
  }
};
</script>

<style scoped>
.detail-des {
  padding: 8px;
  color: #000;
  text-indent: 2em;
  font-size: 15px;
}

.start,
.end {
  position: relative;
  width: 25%;
  height: 1px;
  background-color: #666;
  margin: 5px 0;
}

.end {
  float: right;
}

.start::before,
.end::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #000;
  position: absolute;
}

.start::before {
  top: -2px;
  left: 0;
}

.end::after {
  top: -2px;
  right: 0;
}

.img-title {
  margin: 10px auto;
  text-align: center;
  color: #000;
}

.img-img img {
  width: 100%;
}
</style>